<template>
  <div ref="chart" class="chart"></div>
</template>

<script>
import * as echarts from 'echarts';

export default {
  name: '',
  data() {
    return {
    };
  },
  mounted() {
    // 绘制图表
    const myChart = echarts.init(this.$refs.chart);
    myChart.setOption(
      {
        tooltip: {},
        xAxis: {},
        yAxis: {
          name: '单位：人次',
          axisLabel: { show: false },
          type: 'category',
          data: ['xxxx公园正门', 'xxxx公园后门', 'xxxx商场F出口', 'xxxx商场C出口', 'xxxx大厦A出口', 'xxxx高速出口', 'xxxx超市', 'xxxx美食街', 'xxxx超市', 'xxxx公园'],
        },
        series: [{
          name: '访问人次',
          type: 'bar',
          data: [200, 190, 190, 185, 180, 170, 150, 100, 100, 60],
          label: {
            show: true,
            formatter: '{b}',
            position: 'left',
            align: 'left',
            offset: [20, 0],
            textStyle: { // 数值样式
              color: '#fff', // 字体颜色
              fontSize: 12, // 字体大小
            },
          },
          barWidth: '50%', // 柱的宽度
        }],
      },
    );
  },
  methods: {
  },
};
</script>

<style scoped>
</style>
